import React, { useState, useEffect } from "react";
import { Modal, Button, Row, Col } from "antd";
import "./index.css";

const BillModel = (props) => {
  console.log("获取到的值", props);
  const [isModalVisible, setIsModalVisible] = useState(false);
  useEffect(() => {
    setIsModalVisible(props.store.billModelStatus);
  }, [props.store.billModelStatus]);

  return (
    <>
      <Modal
        title="请选择支付方式"
        visible={isModalVisible}
        footer={
          [] // 设置footer为空，去掉 取消 确定默认按钮
        }
      >
        <Row>待支付金额{props.paid}</Row>
        <Row>
          <Col span={12}>
            <div
              className="wxClass"
              onClick={() => {
                props.dispatch({ type: "changeBillStatus", bill: "WECHAT" });
                props.dispatch({ type: "changeBillModel", status: false });
              }}
            ></div>
          </Col>
          <Col span={12}>
            <div
              className="zfbClass"
              onClick={() => {
                props.dispatch({ type: "changeBillStatus", bill: "ALIPAY" });
                props.dispatch({ type: "changeBillModel", status: false });
              }}
            ></div>
          </Col>
        </Row>
        <Row>
          <Button
            style={{ width: "100%" }}
            onClick={() => {
              props.dispatch({ type: "changeBillModel", status: false });
            }}
          >
            取消
          </Button>
        </Row>
      </Modal>
    </>
  );
};
export default BillModel;
